<template>
  <div>
      <t-dialog header="添加线索" :visible="bodyVisible3" :footer="false" :onClose="bodyClose2">
          <div slot="body">
              <t-form :data="formData" ref="form" @reset="onReset" @submit="onSubmit" :colon="true">
                  <t-form-item label="线索名" name="name">
                    <t-textarea
                        v-model="formData.name"
                        placeholder="请输入线索名"
                        name="description"
                    />
                  </t-form-item>
                  <t-form-item label="线索对应角色" name="value1">
                    <t-select v-model="formData.value1" :options="options1" placeholder="请选择对应角色" />
                  </t-form-item>
                  <t-form-item label="线索图片" name="file1">
                    <t-upload
                        action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
                        v-model="formData.file1"
                        @fail="handleFail"
                        theme="image"
                        :tips="tips"
                        accept="image/*"
                    ></t-upload>
                  </t-form-item>
                  <t-form-item label="线索内容" name="content">
                    <t-textarea
                        v-model="formData.content"
                        placeholder="请输入线索内容"
                        name="description"
                        />
                  </t-form-item>
                  <t-form-item label="线索分类" name="classification">
                    <t-textarea
                        v-model="formData.classification"
                        placeholder="请输入线索分类"
                        name="description"
                        />
                  </t-form-item>
                  <t-form-item style="padding-top: 8px">
                    <t-button theme="primary" type="submit" style="margin-right: 10px">提交</t-button>
                    <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-form-item>
              </t-form>
          </div>
      </t-dialog>
  </div>
</template>

<script>

const INITIAL_DATA = {
  name: '', // 开局剧本
  file1: [], // 线索图片
  value1: '', // 问题
  content: '', // 问题类型
  classification: '' // 剧本
};

export default {
    data() {
        return {
            bodyVisible3: false, // 开关
            formData: { ...INITIAL_DATA }, // form表单数据
            tips: '请上传线索图片', // 上传图片小提示
             options1: [
                { label: '架构云', value: '1' },
                { label: '大数据', value: '2' },
                { label: '区块链', value: '3' },
                { label: '物联网', value: '4', disabled: true },
                { label: '人工智能', value: '5' },
            ],
        }
    },
    methods: {
        // 关闭弹框触发的函数
        bodyClose2 () {
            this.bodyVisible3 = false;
        },

        // 重置表单
        onReset () {
            this.$message.success('重置成功');
        },

        // 提交表单
        onSubmit () {
            // 提交
            this.$message.success('定义成功')
            this.bodyVisible3 = false;
            // this.$emit('tag', this.formData.tag)
        },

        // formatResponse 返回后的 url 优先级高于接口返回的 url
        formatImgResponse() {
            return { url: 'https://tdesign.gtimg.com/site/avatar.jpg' };
        },

        // 一旦 formatResponse 返回值包含 error，便会被组件判定为上传失败
        formatResponse() {
            return { error: '网络异常，图片上传失败' };
        },

        handleFail({ file }) {
            this.$message.error(`文件 ${file.name} 上传失败`);
        },
     }
}
</script>

<style>

</style>